<template>
  <div id="work-wechat-sidebar" :class="[this.fun.getPhoneEnv() == 3 ? 'pcStyle' : '']" class="work-wechat-sidebar">
    <div class="member-header">
      <div class="member-info">
        <div class="atavar">
          <img :src="memberInfo.avatar" alt="">
        </div>
        <div class="info">
          <div style="display: flex; align-items: center;justify-content: space-between;">
            <h1 class="user-name overflow">{{memberInfo.nickname}}</h1>
            <div class="flex-a-c">
              <el-tooltip effect="dark" content="推广员" placement="top"  v-if="memberInfo.is_agent">
                <i class="iconfont icon-tuiguangyuan" style="color: #000;font-size: 1.2rem;"></i>
              </el-tooltip>
              <el-tooltip  effect="dark" content="名片" placement="top"  v-if="memberInfo.is_existence">
                <i class="iconfont icon-mingpian" style="color: #000;margin-left: 1.125rem;font-size: 1rem;" @click="toCard(memberInfo.card_id)"></i>
              </el-tooltip>
            </div>
     
          </div>
          <div style="display: flex; margin-top:.5625rem">
            <div class="mermber-level" v-if="memberInfo.level_name" @click="gotoMemberGrade"><img style="width: .7188rem;margin-right: .0625rem;" :src="require('../../assets/images/wechat_sidebar/member_level.png')" alt="">{{memberInfo.level_name}}</div>
            <span class="user-id" v-if="memberInfo.uid">ID: {{memberInfo.uid}}</span>
          </div>
            <div class="end-time" v-if="memberInfo.yz_member && memberInfo.yz_member.validity">{{memberInfo.yz_member.validity}}到期</div>
        </div>
      </div>
      <div class="border"></div>
      <div style="overflow: hidden;">
        <div ref="integralList" class="integral-mian">
          <ul class="integral-detail">
            <!-- 余额 -->
            <li v-if="memberInfo.credit && memberInfo.credit.is_show == 1" @click="toDetail">
                <p class="amount">{{$i18n.t('money')}}{{memberInfo.credit.data}}</p>
                <p>{{memberInfo.credit.text}}</p>
            </li>
            <!-- 冻结爱心值 -->
            <li v-if="memberInfo.love_show && memberInfo.love_show.unable_love_show == 1">
                <p class="amount">{{memberInfo.love_show.unable_data}}</p>
                <p>{{memberInfo.love_show.unable_text}}</p>
            </li>
            <!-- 可用爱心值 -->
            <li v-if="memberInfo.love_show && memberInfo.love_show.usable_love_show == 1">
                <p class="amount">{{memberInfo.love_show.usable_data}}</p>
                <p>{{memberInfo.love_show.usable_text}}</p>
            </li>
            <!-- 爱心积分 -->
            <li v-if="memberInfo.integral_show && memberInfo.integral_show.is_show">
                <p class="amount">{{memberInfo.integral_show.data}}</p>
                <p>{{memberInfo.integral_show.text}}</p>
            </li>
            <!-- 积分 -->
            <li v-if="memberInfo.integral && memberInfo.integral.is_show == 1">
                <p class="amount">{{memberInfo.integral.data}}</p>
                <p>{{memberInfo.integral.text}}</p>
            </li>
            <!-- 优惠券 -->
            <li v-if="memberInfo.coupon && memberInfo.coupon.is_show == 1">
                <p class="amount">{{memberInfo.coupon.data}}</p>
                <p>{{memberInfo.coupon.text}}</p>
            </li>
          </ul>

        </div>
      </div>
      
    </div>

    <div class="center_box">
      <van-tabs 
        v-model="income_statistic_type" 
        class="time-tabs"
        :title-active-color="'var(--themeBaseColor)' || '#FE5E56'" 
        title-inactive-color="#00001C" 
        :color="'var(--themeBaseColor)' || '#FE5E56'"
        line-width="15px" 
        @change="selectTime">
        <van-tab title="全部" name="0"></van-tab>
        <van-tab title="今日" name="1"></van-tab>
        <van-tab title="昨日" name="2"></van-tab>
        <van-tab title="本周" name="3"></van-tab>
        <van-tab title="上周" name="4"></van-tab>
        <van-tab title="本月" name="5"></van-tab>
      </van-tabs>
      <div class="income-detail" v-if="income_statistic.length > 0">
        <div class="item" v-for="(item,index) in income_statistic" :key="index">
          <!--placement="top"-->
          <el-tooltip  effect="dark" :content="item.value"  placement="top-start">
            <div>
              <p class="num overflow">{{item.value}}</p>
              <p class="name">{{item.title}}</p>
            </div>
          </el-tooltip>
        </div>


      </div>
      <p class="tips">注：团队粉丝不随周期变化</p>
    </div>

    <div class="my-tags">
      <div class="header">
        <div class="title">
          <span>标签（{{tags && tags.length}}）</span>
          <el-tooltip v-if="memberInfo.is_agent" effect="dark" content="每个企业最多设置3000个标签,标签数据可能延时,请手动刷新" placement="top">
            <i class="iconfont icon-wenhao" ></i>
          </el-tooltip>
        </div>
        <div>
          <!-- <span class="history-tag" @click="showAddSheet=true">历史标签</span>
          <div class="add-tags" @click="showAddTagPop=true">+新增标签</div> -->
          <div class="add-tags" @click.stop="getUserData">刷新</div>
          <div class="add-tags" @click.stop="delTags">{{delShow?'完成':'管理'}}</div>
          <div class="add-tags tags" @click.stop="show_label">贴标签</div>
        </div>
      </div>
      <customer-label 
        :tags="tags"
        class="customer-tags"
        :labeLClass="false" 
        :labeLMore="true"
        :labelShow.sync="labelShow"
        :delShow="delShow" 
        @deleteTag="deleteTag">
      </customer-label>
      
    </div>
    <van-popup v-model="labelShow" round  position="bottom" :style="{ height: '60%' }"  @close="labelShow = false">
      <div class="label-popup">
        <div class="popup-head flex-a-c flex-j-sb">
          <h3>全部标签</h3>
          <div class="label-circle flex-a-c flex-j-c">
            <span class="iconfont icon-guanbi" @click.stop="labelShow = false"></span>
          </div>
          
        </div>
        <customer-label 
          class="popup-customer-label"
          :tags="tags" 
          :labeLClass="false" 
          :labeLMore="false" 
          :delShow="delShow"
          @deleteTag="deleteTag">
        </customer-label>
      </div>
    </van-popup>
    <div class="tab-bar">
      <!-- <div class="title">会员信息</div> -->
      <van-tabs 
        v-model="navActive" 
        class="tabs"
        :title-active-color="'var(--themeBaseColor)' || '#FE5E56'" 
        title-inactive-color="#00001C" 
        :color="'var(--themeBaseColor)' || '#FE5E56'"
        line-width="15px" >
        <van-tab :title="item" :name="index" v-for="(item, index) in tabList" :key="index"></van-tab>
      </van-tabs>
    </div>

    <div class="bottom-box" v-if="showChild">
      <user-info v-if="navActive === 0"
        :memberId="memberInfo.yz_member ? memberInfo.yz_member.member_id : ''"
        :cropId="cropId"
      ></user-info>
      <template v-else>
        <component :is="componentName"></component>
      </template>
    </div>

    <!-- <van-action-sheet v-model="showAddSheet" :actions="actions" @select="selectTags"></van-action-sheet> -->
    <!--打标签-->
    <label-pop  
      :makeTagPop.sync="makeTagPop"
      :groupName.sync="query.group_name"
      :tags='actions'
      :groupList="groupList"
      :coThemeColor="coThemeColor"
      ref="labelPopup"
      @classifyOn="classifyOn"
      @groupChange="groupChange"
      @tabsClickConfirm="tabsClickConfirm"
      >
    </label-pop>
    <add-label-pop
    :addTagPop.sync="addTagPop"
    :groupList="groupList"
    @addConfirmOn="addConfirmOn"
    ref="addLabel"
    @addOpened="addOpened">
    </add-label-pop>
    <van-popup v-model="showAddTagPop" :style="{ height: '12rem', width: '80%',position: 'fixed',
    left: '50%',zIndex:'1111' }" :closeable="true" round get-container="#work-wechat-sidebar">
      <div class="addtag-popup">
        <p class="popup-title">添加标签</p>
        <van-field class="tag-input" v-model="addTagText" placeholder="请输入标签内容" />
        <div class="btn-confirm" @click="confirmAdd">确定</div>
      </div>
    </van-popup>
    <van-popup v-model="bindCunstomerUidPop"  :style="{ width: '18rem!important',left: '50% !important'}" :close-on-click-overlay="false" round>
      <van-nav-bar title="绑定外部联系人"/>
      <van-cell-group>
        <van-field v-model="bindCunstomerUid_vaule" @input="onInputMember" label="选择会员" placeholder="输入会员手机号/昵称/ID" />
      </van-cell-group>
      <div class="bindCunstomerUid_list"  ref="popup-customer-list">
        <div class="d-flex" @click.stop="selectUId(item)" style="margin: 12px 12px 0 12px;" v-for="item in bindCunstomerUid_list" :key="item.id">
          <img class="w-20" :src="item.avatar_image" alt="">
          <div style="flex: 1; overflow: hidden;">
            <div style="font-size: 15px;" class="clamp-1">{{item.username||'---'}}【{{item.uid}}】</div>
            <div style="color: #999;">{{item.mobile||'---'}}</div>
          </div>
        </div>
      </div>
      <div class="d-flex" style="margin: 12px;">
        <div>已选中会员：</div>
        <div class="d-flex" style="margin: 12px 12px 0 12px;" v-if="activeUidInfo.uid">
          <img class="w-20" :src="activeUidInfo.avatar_image" alt="">
          <div style="flex: 1; overflow: hidden;">
            <div style="font-size: 15px;" class="clamp-1">{{activeUidInfo.username||'---'}}【{{activeUidInfo.uid}}】</div>
            <div style="color: #999;">{{activeUidInfo.mobile||'---'}}</div>
          </div>
        </div>
      </div>
      <div style="margin: 24px 12px 12px;">
        <van-button color="var(--themeBaseColor)" block @click="bindGroupUid">绑定</van-button>
      </div>
    </van-popup>
    <!--<c-foot></c-foot>-->
  </div>

</template>



<script>
import wechat_sidebar from "./wechat_sidebar_controller";
export default wechat_sidebar;
</script>

<style lang='scss' rel='stylesheet/scss' scoped>
.label-popup .popup-customer-label ::v-deep .tag-height{
  height: auto !important;
  overflow: unset;
}
.tab-bar ::v-deep .van-tab--active{
  font-weight: bold;
  font-size: .9375rem;
}
.pcStyle {
  width: 375px;
  margin: 0 auto;
}
.center_box ::v-deep .van-tabs__line {
  bottom:1.3125rem;
}
.tab-bar ::v-deep .van-tabs__line {
  bottom:1.3125rem;
}
.tabs ::v-deep  .van-tabs__nav--complete  {
  background: transparent;
}
.customer-tags .customer-label{
  padding:0;
  margin: 0 12px;
}
#work-wechat-sidebar {
  font-size: 12px;
  .header-tabs {
    width: 12rem;
  }

  .member-header {
    color: #fff;
    padding: 20px 1.25rem 0 12px;
    background:  linear-gradient( 180deg, #A9D2FF 0%, #E8F7FF 52%, #F5F5F5 100%);
    .member-info {
      display: flex;
      align-items: center;
      padding:0 0 20px 0;
      .atavar {
        width: 63px;
        height: 63px;
        border: 1px solid #FFFFFF;
        border-radius: 50%;
        overflow: hidden;
        // background-color: #000;
        box-sizing: border-box;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .info {
        flex: 1;
        margin-left: .625rem;

        .user-name {
          line-height: 1;
          max-width: 10rem;
          font-weight: bold;
          font-size:1.125rem;
          color: #00001C;
        }

        .user-id {
            background-color: #fff;
            padding: .25rem .5625rem;
            text-align: center;
            font-weight: 500;
            font-size: .75rem;
            color: #3B3B4A;
            margin-left: .25rem;
            border-radius: .625rem;
            line-height: 1;
            box-sizing: border-box;
        }


        .iconfont {
          // margin-left: 0.7rem;
          // color: #ffc479;
        }

        .icon-fontclass-mingpian {
          font-size: 2rem;
        }

        .icon-tuiguangyuan {
          // font-size: 1.1rem;
          width: 19px;
          padding:0 18px 0 0;
        }

        .mermber-level {
          position: relative;
          display: flex;
          align-items: center;
          background: linear-gradient( 90deg, #FFDC97 0%, #FFEABB 100%);
          border-radius: .625rem;
          border: 1px solid #FFFFFF;
          padding:.2813rem .5313rem;
          font-weight: 500;
          font-size:.6875rem;
          line-height: 1;
          color: #7B400B;
          box-sizing: border-box;
        }

        .end-time {
          font-weight: 400;
          font-size: .75rem;
          color: #6E6E79;
          line-height: 1;
          text-align: left;
          margin-left: .1563rem;
          margin-top: .4688rem;
        }
      }
    }

 
    .integral-mian {
      position: relative;
      overflow: scroll;
      border-radius: 8px 8px 8px 8px;
    }
    .integral-mian::-webkit-scrollbar{
      display: none;
    }
    .integral-mask {
      width: 42px;
      height: 100%;
      background: linear-gradient( 90deg, rgba(255,255,255,0) 0%, #FFFFFF 100%);
      border-radius: 0px 10px 10px 0px;
      position: absolute;
      right:0;
      top:0;
    }
    .integral-detail {
      // display: flex;
      white-space: nowrap;
      // align-items: center;
      // overflow-y: hidden;
      background-color: #fff;
      position: relative;
      border-radius: 8px 8px 8px 8px;
      
      cursor: pointer;
      display: inline-block;
      li {
        // flex: 1;
        display: inline-block;
        // line-height: 1.5rem;
        // margin: 0 0.5rem;
        padding:19px 10px 16px 10px;


        .amount {
          font-weight: bold;
          font-size: 15px;
          color: #00001C;
          padding:0 0 8px 0;
        }
        p {
          font-weight: 400;
          font-size: 12px;
          line-height: 12px;
          color: #999999;
        }
      }
    }
  }

  .label-popup {
    padding:20px 16px;
    .popup-head {
      padding:0 0 10px 0;
      h3 {
        font-weight: bold;
        font-size: 15px;
        color: #00001C;
      }
      .label-circle {
        background: #F0F0F1;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        .icon-guanbi {
          font-size: 10px;
        }
      }
    }
  }
  .center_box {
    background-color: #fff;
    // padding: 0.875rem;
    margin:10px 12px 0 12px;
    padding:0 0 12px 0;
    border-radius: 8px;
    overflow: hidden;
    .time-tabs {
      width: auto;
      border-bottom: 1px solid #E3E3E3;
    }

    .income-detail {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      padding: 0.5rem 0.5rem 1rem 0.5rem;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 15px;
      // margin-top: 1rem;
      color: #fff;
      // background-repeat: no-repeat;
      // background-size: 100% 100%;
      // background-image: url("../../assets/images/enterprise_wechat/income_bg.png");
      text-align: left;
      white-space: pre-wrap;
      word-break: break-all;

      .item {
        .num {
          font-weight: bold;
          font-size: 15px;
          color: #00001C;
        }
        .name {
          font-weight: 400;
          font-size: 12px;
          color: #999999;
          padding:8px 0 0 0;
        }
        // display: inline-block;
        // position: relative;
        // width: 32%;
        // padding: 0.5rem;
        // text-align: center;
        // white-space: nowrap;
        // font-size: 0.813rem;
      }

      // .item::before {
      //   position: absolute;
      //   content: '';
      //   top: 50%;
      //   left: 0;
      //   width: 1px;
      //   height: 1.5rem;
      //   background-color: #fff;
      //   transform: translateY(-50%) scaleX(0.5);
      // }

      .item:first-child::before,
      .item:nth-child(3n+4)::before {
        width: 0;
      }
    }

    .tips {
      font-weight: 400;
      font-size: 11px;
      color: #999999;
      padding:1px 0 0 8px;
      text-align: left;
    }

    
  }
  .my-tags {
    // margin-top: 1rem;
    background: #FFFFFF;
    border-radius: 8px 8px 8px 8px;
    margin:10px 12px;
    padding:10px;
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding:0 0 15px 0;
      .title {
        font-size: 0.938rem;
        span{
          font-weight: bold;
          font-size: .9375rem;
          color: #00001C;
        }
      }

      .history-tag {
        margin-right: 0.625rem;
        color: #f14e4e;
        font-size: 600;
      }

      .add-tags {
        cursor: pointer;
        display: inline-block;
        font-weight: 500;
        font-size: 13px;
        line-height: 13px;
        color: var(--themeBaseColor);
        padding:8px 16px;
        border-radius: 15px 15px 15px 15px;
        border: 1px solid var(--themeBaseColor);
        // color: #f14e4e;
        // font-size: 0.688rem;
        // line-height:0.688rem;
        // // padding: 0.1rem 0.5rem;
        // padding:6px 12px;
        // border-radius: 0.6875rem;
        // border: solid 0.031rem #f14e4e;
        cursor: pointer;
        margin:0 8px 0 0;
        &:nth-child(3) {
          margin:0;
          background: var(--themeBaseColor);
          color: #FFFFFF;
          border:none;
        }
      }
      .tags {
        color: #FFFFFF;
      }

      // .icon-ht_tips {
      //   color: #cda881;
      // }
      .icon-wenhao {
        width: 16px;
        color: #AAAAB3;
   
      }
    }
    .fade-enter-active, .fade-leave-active {transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to  {opacity: 0;
    } 

    .tag-list {
      height: auto;
      text-align: left;
      // display: block;
      position: relative;
      
      // padding:0 1.875rem 0 0.3125rem;
      // height: 0;
      // transform: translateY(-100%); 
      .tag {
        font-size: 12px;
        line-height: 12px;
        padding:6px 10px;
        color: #3B3B4A;
        margin:0 10px 10px 0;
        position: relative;
        display: inline-block;
        background: #F5F5F5;
        border-radius: 6px 6px 6px 6px;
        // padding: 0.2rem;
        // margin: 1.5rem 1.5rem 0 0;
        // font-size: 0.688rem;
        .tag-clone {
          background: rgba(0, 0, 0, 0.5);
          border-radius: 0px 6px 0px 6px;
          color:#fff;
          font-weight: bold;
          font-size: 11px;
          line-height: 11px;
          position: absolute;
          right:0;
          top:0;
          z-index: 3;
          padding:3px 4px;
          cursor: pointer;
        }
      }

      // ::v-deep .van-tag--plain::before {
      //   transform: translateX(-0.3rem);
      // }

      // ::v-deep .van-tag__close {
      //   margin: 0;
      //   cursor: pointer;
      //   transform: translate(0.88rem, -0.788rem);
      // }
    }
    .view-more {
      width:100%;
      font-size: 13px;
      line-height: 13px;
      color: #3B3B4A;
      cursor: pointer;
      padding:  0 0 15px 0;
      // margin:5px 0 0 0;
      text-align: center;
      .icon-course_goon {
        font-size: 13px;
        display: inline-block;
        transform: rotate(0deg);
        transition: 0.5s;
        color:#AAAAB3;
        
      }
      .overturn {
        transform: rotate(90deg);
        transition: 0.5s;
      }
    }
    .tag-height {
      height: 8.5rem;
      // transform: translateY(0%); 
      overflow: hidden;
      transition:height 0.5s;
    }
    .tag-more {
      height: auto;
      overflow: hidden;
      transition:height 0.5s;
    }
  }

  .tab-bar {
    position: relative;
    // padding: 1rem 0.875rem 0.3rem 0.875rem;
    // background-color: #fff;
    margin-top: 0.5rem;

    .title {
      text-align: left;
      font-size: 0.938rem;
      margin-bottom: 0.5rem;
    }
   
    // ::v-deep .van-tabs {
    //   .van-tabs__nav--complete {
    //     padding-left: 0;
    //   }

    //   .van-tabs__wrap--scrollable .van-tab {
    //     padding: 0 24px 0 0;
    //   }

    //   .van-tabs__line {
    //     left: -12px;
    //   }
    // }
  }

  // .tab-bar::after {
  //   position: absolute;
  //   content: '';
  //   bottom: 0;
  //   left: 0;
  //   width: 100%;
  //   height: 1px;
  //   background-color: #e9e5e5;
  //   transform: scaleY(0.5);
  // }

  .bottom-box {
    // margin-top: 0.5rem;
  }

  .addtag-popup {
    width: 100%;
    height: 100%;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    .popup-title {
      color: #252525;
      font-size: 0.938rem;
    }

    .tag-input {
      margin: 0.5rem 0;
      padding: 5px 16px;
      border: solid 1px #afaaaa;
      border-radius: 2rem;
    }

    .btn-confirm {
      width: 80%;
      color: #fff;
      border-radius: 1rem;
      padding: 0.46rem 0;
      font-size: 0.938rem;
      background-color: #f59a1f;
    }
  }

  .d-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    flex: 1;
    overflow: hidden;
  }

  .w-20 {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 0 12px 0 0;
  }

  .clamp-1 {
    overflow: hidden;/* 超出部分隐藏 */
    text-overflow: ellipsis;/* 超出部分显示省略号 */
    white-space: nowrap;/* 规定段落中的文本不进行换行 */
  }

  .bindCunstomerUid_list {
    max-height: 9rem;
    overflow: scroll;
  }

  .bindCunstomerUid_list::-webkit-scrollbar {
    display: none;
  }
}

</style>